<template>
	<view class="content">
		<view class="address_form">
			<view class="form_box box_shadow">
				<view class="label">
					<view class="title">联系人</view>
					<view class="input">
						<input type="text" v-model="addressData.name" placeholder="请输入联系人姓名"
							placeholder-style="color: #bbb" />
					</view>
				</view>
				<view class="label">
					<view class="title">手机号</view>
					<view class="input">
						<input type="number" :maxlength="11" v-model="addressData.mobile" placeholder="请输入联系人手机号码"
							placeholder-style="color: #bbb" />
					</view>
				</view>
				<view class="label">
					<view class="title">所属区域</view>
					<view class="input">
						<picker mode="region" :value="region" @change="selectRegion">
							<view class="picker">
								<block v-for="(item, index) in region" :key="index">
									<text v-if="index > 0">-</text>
									{{ item }}
								</block>
							</view>
						</picker>
					</view>
				</view>
				<view class="label">
					<view class="title">地址信息</view>
					<view class="input">
						<input type="text" v-model="addressData.address" placeholder="请输入街道门牌信息" style="width: 80%;"
							placeholder-style="color: #bbb" />
						<view class="local" @click="getLocation()">
							<u-icon name="map-fill" color="#71beea" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="label">
					<view class="title">门牌号</view>
					<view class="input">
						<input type="text" v-model="addressData.houseNumber" placeholder="填写详细地址,例:1层120室"
							placeholder-style="color: #bbb" />
					</view>
				</view>
				<view class="label">
					<view class="title">默认地址</view>
					<view class="input" style="border: none;"><u-switch activeColor="#F54319"
							v-model="addressData.default" size="20"></u-switch></view>
				</view>
				<view class="button">
					<view class="saveBtn" @click="saveAddress()">保存地址信息</view>
					<view class="saveBtn" style="background-color: #F5431960;" v-if="addressData.id"
						@click="delAddress()">删除地址信息</view>
					<view class="saveBtn wechat" @click="getWechatAdds()">获取微信地址</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchUserInfoById,
		updateUserInfo,
	} from "@/tools/request/api.js"
	import qqmap from '@/tools/utils/qqmapsdk.js';
	const qqmapsdk = new qqmap({
		key: 'EQXBZ-6T2CG-MWNQJ-IU5MR-FPQME-TQF4G'
	});
	export default {
		data() {
			return {
				template: uni.getStorageSync('__ddminiTemplateConfig'),
				region: ['上海市', '上海市', '闽行区'],
				addressData: {
					default: false,
					address: '',
					province: '上海市',
					city: '上海市',
					district: '闽行区',
					latitude: 0,
					name: '',
					mobile: '',
					longitude: 0,
					order: 0,
					areaCode: '',
					houseNumber: ''
				},
				editAddressStatus: false,
				addressList: [],
				floor: '',
				index: '',
				list1: '',
				location: ''
			};
		},
		onLoad() {
			let self = this;
		},
		onShow() {
			let self = this;
			self.location = uni.getStorageSync('__NowlocationInfo');
			self.getAddressList();
		},
		methods: {
			selectRegion(e) {
				this.region = e.detail.value;
				this.addressData.province = this.region[0];
				this.addressData.city = this.region[1];
				this.addressData.district = this.region[2];
			},
			getAddressList() {
				let self = this;
				let id = uni.getStorageSync('__ddminiUserInfo').id;
				searchUserInfoById({
					userId: id
				}).then(res => {
					if (res.code == 200) {
						let list = res.body.receiveAddressJson;
						if (list != '' && list != null) {
							self.addressList = JSON.parse(list);
						}
					}
				});
			},
			getLocation() {
				let self = this;
				if (self.location == '') {
					self.chooseLocationTap()
				} else {
					self.addressData.latitude = self.location.latitude;
					self.addressData.longitude = self.location.longitude;
					self.chooseLocationTap()
				}
			},
			getWechatAdds() {
				let self = this;
				uni.chooseAddress({
					success: function(res) {
						self.region[0] = res.provinceName;
						self.region[1] = res.cityName;
						self.region[2] = res.countyName;
						self.addressData.name = res.userName;
						self.addressData.mobile = res.telNumber;
						self.addressData.province = res.provinceName;
						self.addressData.city = res.cityName;
						self.addressData.district = res.countyName;
						self.addressData.address = res.detailInfo;
					}
				});
			},
			editaddreee() {
				let self = this;
			},
			saveAddress() {
				let self = this;
				let data = self.addressData;
				let time = Date.now();
				self.addressData.order = time;
				if (self.addressData.default == true) {
					self.addressList.forEach(item => {
						if (item.default == true) {
							item.default = false;
						}
					});
				}
				if (!data.name) {
					uni.showModal({
						title: '提示',
						content: '请输入联系人姓名',
						showCancel: false
					});
					return;
				} else if (!data.mobile) {
					uni.showModal({
						title: '提示',
						content: '请输入联系人手机',
						showCancel: false
					});
					return;
				} else if (!/^1[3456789]\d{9}$/.test(data.mobile)) {
					uni.showModal({
						title: '手机格式错误',
						content: '请输入正确的手机号码',
						showCancel: false
					});
					return;
				} else if (!data.address) {
					uni.showModal({
						title: '地址保存提示',
						content: '请输入详细的街道门牌信息',
						showCancel: false
					});
					return;
				} else if (!data.latitude) {
					uni.showModal({
						title: '地址保存提示',
						content: '当前地址信息经纬度丢失,请点击地图选择',
						showCancel: false
					});
					return;
				} else if (!data.houseNumber) {
					uni.showModal({
						title: '地址保存提示',
						content: '请输入楼层门牌信息',
						showCancel: false
					});
					return;
				} else {
					let list1 = [self.addressData];
					let list2 = self.addressList;
					let list3 = [];
					if (list2.length > 0) {
						list3 = list1.concat(list2);
					} else {
						list3 = list1;
					}
					let postData = {
						receiveAddressJson: JSON.stringify(list3)
					};
					updateUserInfo(postData).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '地址保存成功'
							});
							// self.getAddressList();
							setTimeout(function() {
								uni.navigateBack();
							}, 500);
						} else {
							console.log(res);

							uni.showToast({
								title: '添加失败',
								duration: 1000,
								icon: 'error'
							});
						}
					});
				}
			},
			chooseLocationTap() {
				let self = this;
				let data = self.addressData;
				console.log(data, '当前位置')
				uni.chooseLocation({
					latitude: data.latitude || '',
					longitude: data.longitude || '',
					success(res) {
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success(qes) {
								let qdata = qes.result.ad_info;
								self.region = [qdata.province, qdata.city, qdata.district];
								self.addressData.province = qdata.province;
								self.addressData.city = qdata.city;
								self.addressData.district = qdata.district;
								self.addressData.address = res.name;
								self.addressData.areaCode = qdata.adcode;
								self.addressData.latitude = res.latitude;
								self.addressData.longitude = res.longitude;
							}
						});
					},
					fail(err) {
						self.editAddressStatus = true;
						return uni.showToast({
							title: '选择位置失败，请手动输入',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		padding-top: 20rpx;
	}

	.address_form {

		// padding-top: 30rpx;
		.form_box {
			width: 92%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 0;

			.label {
				display: flex;
				align-items: center;
				height: 120rpx;
				width: 90%;
				margin: 0 auto;

				.title {
					width: 140rpx;
					color: #1c1c1c;
					font-size: 28rpx;
				}

				.input {
					flex: 1;
					height: 70rpx;
					display: flex;
					align-items: center;
					border: 1px solid #efefef;
					border-radius: 10rpx;
					justify-content: space-between;

					input {
						width: 92%;
						height: 100%;
						color: #1c1c1c;
						font-size: 28rpx;
						padding-left: 20rpx;
					}

					.local {
						width: 70rpx;
						height: 70rpx;
						background-color: #efefef;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					picker {
						width: 92%;
						height: 100%;
						line-height: 70rpx;
						color: #1c1c1c;
						font-size: 28rpx;
						padding-left: 20rpx;

						.picker {
							width: 100%;

							text {
								padding: 0 10rpx;
								color: #bbb;
							}
						}
					}
				}
			}

			.button {
				width: 70%;
				margin: 0 auto;
				padding-bottom: 30rpx;

				.saveBtn {
					width: 100%;
					height: 80rpx;
					font-size: 30rpx;
					color: #fff;
					border-radius: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 30rpx;
					// border: 1px solid;
					color: #fff;
					background-color: #71beea;
				}

				.wechat {
					background-color: #fff;
					color: #07c160;
					border: 1px solid #07c160;
				}
			}
		}
	}
</style>